<template>
  <div>
    <div v-if="!isAdd && !isShowDetail">
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item>
          <el-select v-model="formInline.region" value="formInline.region==1?'课程名称':'课程标签'">
            <el-option label="课程名称" value="1"></el-option>
            <el-option label="课程标签" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="：">
          <el-input v-model="formInline.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item label="课程状态：">
          <el-select v-model="formInline.region" value="formInline.region==1?'课程名称':'课程标签'">
            <el-option label="全部" value="null"></el-option>
            <el-option label="未上架" value="1"></el-option>
            <el-option label="已上架" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间：">
          <el-col :span="11">
            <el-date-picker
              v-model="formInline.date"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
          </el-col>
        </el-form-item>
        <el-form-item label="课程分类：" ref="aaaa">
          <el-select v-model="formInline.region" value="formInline.region==1?'课程名称':'课程标签'">
            <el-option label="全部" value="null" @click="checkOption"></el-option>
            <el-option label="未上架" value="1"></el-option>
            <el-option label="已上架" value="2"></el-option>
          </el-select>
          <el-select v-model="formInline.region" value="formInline.region==1?'课程名称':'课程标签'">
            <el-option label="全部" value="null"></el-option>
            <el-option label="未上架" value="1"></el-option>
            <el-option label="已上架" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="checkOption">查询</el-button>
        </el-form-item>
      </el-form>
      <CourseTable :list="list" :fn-list="fnList"></CourseTable>
    </div>
    <AddOnlineCourse v-if="isAdd" :id="id" :closePop="closeAdd"></AddOnlineCourse>
    <CourseDetail v-if="isShowDetail" :id="id" :closePop="closeDetail"/>
  </div>
</template>

<script>
  import CourseTable from "./CourseTable";
  import AddOnlineCourse from "./model/AddOnlineCourse";
  import CourseDetail from "./model/CourseDetail";
  export default {
    name: "CourseList",
    components: {CourseDetail, CourseTable,AddOnlineCourse},
    data() {
      return {
        formInline: {
          user: '',
          region: '',
          date: '',
        },
        list:[],
        fnList:[],
        isAdd:false,
        isShowDetail:false,
        id:null,
      }
    },
    created() {
      console.log(this.$i18n)
      this.init(this.$route.query.courseType)
    },
    watch:{
      '$route.query.courseType'(newVal,oldVal){
        if(newVal !== oldVal)this.init(newVal);
      }
    },
    methods:{
      init(courseType){
        this.fnList = [
          {
            name:'下架',
            key:'offShelf',
            class:'btn-normal',
            judge:'isRelease',
            judgeShow:1,
            fn:this.offShelf
          },
          {
            name:'上架',
            key:'onShelf',
            class:'btn-normal',
            judge:'isRelease',
            judgeShow:null,
            fn:this.offShelf
          },
          {
            name:'编辑',
            key:'add',
            class:'btn-normal',
            fn:this.toAddCourse
          },
          {
            name:'删除',
            key:'del',
            class:'btn-danger',
            fn:this.offShelf
          },
          {
            name:'详情',
            key:'detail',
            class:'btn-normal',
            fn:this.toDetail
          },
        ]
        this.getList(courseType);
      },
      offShelf(course){
      },
      toAddCourse(course){
        this.isAdd = true;
        console.log(course.id)
        this.id = course.id;
      },
      getList(courseType){
        this.$api.course.getCourseList({courseType:courseType}).then(
          res => {
            this.list = res.data.list.map(
              item => {
                if(item.courseLabel){
                  item.labelList = item.courseLabel.split(',');
                }
                return item;
              }
            );
          }
        )
      },
      checkOption(){
        console.log(this.$refs)
      },
      submit(){

      },
      closeAdd(isUpdate){
        this.isAdd = false;
        if(isUpdate)this.getList();
      },
      closeDetail(){
        this.isShowDetail = false;
      },
      toDetail(){
        this.isShowDetail = !this.isShowDetail;
      }
    }
  }
</script>

<style lang="scss" scoped>
  .el-form{
    background-color: #ffffff;
    padding: 10px;
    margin-bottom: 20px;
    overflow: hidden;
    .el-form-item{
      float: left;
    }
  }
</style>
